<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>长虹[联合运营平台后台管理系统]</title>
		<!-- 全局CSS 开始-->
		<link href="../css/global/bootstrap.min.css" rel="stylesheet" />
		<link href="../css/global/font-awesome.min.css" rel="stylesheet" />
		<link href="../css/global/simple-line-icons.css" rel="stylesheet" />
		<link href="../css/global/animate.css" rel="stylesheet" />
		<link href="../css/global/style.css" rel="stylesheet" />
		<link href="../js/plugins/pace/pace.css" rel="stylesheet" />
		<!-- 全局CSS 结束-->
		<!-- 页面CSS 开始-->
		<!-- 页面CSS 结束-->
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="../js/bootstrap/html5shiv.min.js"></script>
		<script src="../js/bootstrap/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="wrapper wrapper-content animated fadeInUp">
			<div class="row page-heading">
				<h4><i class="fa fa-flask"></i>  UI组件 / 弹出框</h4>
			</div>
			<div class="row">
				<div class="col-sm-8">
					<div class="ibox">
						<div class="ibox-title">
							<h5>模态对话框（Modal）</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>以弹出对话框的形式出现，具有最小和最实用的功能集。<a href="http://v3.bootcss.com/javascript/#modals">详情点击</a></p>
							<div class="note note-danger">
								<h4>不支持模态框重叠</h4>
								<p>万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。</p>
							</div>
							<div class="note note-danger">
								<h4>模态框的 HTML 代码放置的位置</h4>
								<p>务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。</p>
							</div>
							<div class="note note-danger">
								<h4>增强模态框的可访问性</h4>
								<p>务必为 <code>.modal</code> 添加 <code>role="dialog"</code> 属性，<code>aria-labelledby="myModalLabel"</code> 属性用于只想模态框的标题栏，<code>aria-hidden="true"</code> 用于通知辅助性工具略过模态框的 DOM元素。</p>
								<p>另外，你还应该通过 <code>aria-describedby</code> 属性为模态框 <code>.modal</code> 添加描述性信息。</p>
							</div>
							<h4>禁止动画效果</h4>
							<p>如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 <code>.fade</code> 类即可。</p>
							<h4>通过 data 属性</h4>
							<p>不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 <code>data-toggle="modal"</code> 属性，或者 <code>data-target="#foo"</code> 属性，再或者 <code>href="#foo"</code> 属性，用于指向被控制的模态框。</p>
							<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
							确认框1 </button>
							<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal2">
							确认框2 </button>
							<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal3">
							确认框3 </button>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="ibox">
						<div class="ibox-title">
							<h5>iframe弹出框</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>利用fancybox插件弹出外部网页或者图片全屏。由于网站是利用嵌入iframe形式，所以采取js技巧使弹出框在index页面出现。index页面需要引入<code>jquery.fancybox.css</code>和<code>jquery.fancybox.js</code>，子页面只需引入<code>jquery.fancybox.js</code>。</p>
							<h4>图片全屏弹出框</h4>
							<a class="fancybox" href="../images/example_image.jpg" title="example-image.jpg">
								<img src="../images/example_image_thumb.jpg" alt="..." class="img-rounded img-responsive" />
							</a>
							<br/>
							<p>需要给图片加class为<code>fancybox</code>的<code>a标签</code>，<code>href</code>值为全屏图片的链接</p>
							<h4>弹出iframe网页</h4>
							<p>需要给<code>a标签</code>加class为<code>fancybox_iframe</code>，<code>href</code>值为外部网页的链接</p>
							<a class="fancybox_iframe" href="dashboard.html">Iframe</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 全局js 开始-->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap/bootstrap.min.js"></script>
		<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="../js/custom/custom.js"></script>
		<script src="../js/plugins/pace/pace.min.js"></script>
		<!-- 全局js 结束-->
		<!-- 页面js 开始-->
		<!-- iframeResizer -->
		<!-- <script src="../js/plugins/iframeResizer/iframeResizer.contentWindow.min.js"></script> -->
		<!-- fancybox -->
		<script src="../js/plugins/fancybox/jquery.fancybox.js"></script>
		<!-- 页面js 结束-->
	</body>
</html>